<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<!-- / => 首页
	/module1 => 模块1
-->
<body ng-app="rootApp">
<ul>
  <li><a href="#/">主页</a></li>
  <li><a href="#/module1">module1</a></li>
  <li><a href="#/module2">module2</a></li>
</ul>
<div ng-view=""></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script id="template" type="text/ng-template">
  <h1>{{hello}}</h1>
</script>
<script>
  var rootApp = angular.module('rootApp', ['ngRoute']);
  rootApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        controller: 'DefaultController',
        templateUrl: 'template'
      })
      .when('/module1', {
        controller: 'Module1Controller',
        templateUrl: 'template'
      })
      .when('/module2/:id/:name/:age', {
        controller: 'Module2Controller',
        templateUrl: 'template'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);
  rootApp
    .controller('DefaultController', ['$scope', function ($scope) {
      $scope.hello = 'Default';
    }])
    .controller('Module1Controller', ['$scope', function ($scope) {
      $scope.hello = 'Module1';
    }])
    .controller('Module2Controller', ['$scope', '$routeParams', function ($scope, $routeParams) {
      console.log($routeParams);
      $scope.hello = 'Module2';
    }])
</script>
</body>
</html>
